在寫CSS的時候,我們有不同的撰寫方式比如行內套用以及嵌入套用
(更多套用的說明請看這:https://ithelp.ithome.com.tw/articles/10291656)
但是要特別注意CSS優先權的問題,下面我們來舉個例子:
我們在< head >裡打上< style >,讓段落呈現藍色
<title>Document</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>這是段落</p>
</body>
</html>
顯示如下:
**接著在color:blue下一行新增color:red
<title>Document</title>
<style>
p{
color: blue;
color: red;
}
</style>
</head>
<body>
<p>這是段落</p>
</body>
</html>
顯示如下:
由上述可知道,撰寫的先後順序,後寫的會優於先寫的,所以後寫的會被套用!
我們在< head >裡打上< style >,讓段落呈現藍色
<title>Document</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>這是段落</p>
</body>
</html>
顯示如下:
接著我們在行內打上< style >
<title>Document</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p style= color:red>這是段落</p>
</body>
</html>
顯示如下:
由上述可以知道,行內套用的方式會會優於嵌入套用的方式~
最後介紹就代表它最重要啦~
我們先把行內改成green,接者在< head >裡的 color :blue 後面加上!important
<title>Document</title>
<style>
p{
color: blue !important;
}
</style>
</head>
<body>
<p style= color:green>這是段落</p>
</body>
</html>
顯示如下:
由上述可已知道,加上!important後,屬性值優先權最高,先被套用!
!important>行內套用>嵌入套用